<!doctype html>


<html>
<head>
  <link rel="shortcut icon" href="static/images/favicon.ico" type="image/x-icon">
  <title>mp3.js (Closure Library API Documentation - JavaScript)</title>
  <link rel="stylesheet" href="static/css/base.css">
  <link rel="stylesheet" href="static/css/doc.css">
  <link rel="stylesheet" href="static/css/sidetree.css">
  <link rel="stylesheet" href="static/css/prettify.css">

  <script>
     var _staticFilePath = "static/";
  </script>

  <script src="static/js/doc.js">
  </script>

  <meta charset="utf8">
</head>

<body onload="prettyPrint()">

<div id="header">
  <div class="g-section g-tpl-50-50 g-split">
    <div class="g-unit g-first">
      <a id="logo" href="index.html">Closure Library API Documentation</a>
    </div>

    <div class="g-unit">
      <div class="g-c">
        <strong>Go to class or file:</strong>
        <input type="text" id="ac">
      </div>
    </div>
  </div>
</div>





<div class="colmask rightmenu">
<div class="colleft">
    <div class="col1">
      <!-- Column 1 start -->

<div id="title">
       <span class="fn">mp3.js</span>
</div>

<div class="g-section g-tpl-75-25">
  <div class="g-unit g-first" id="description">
    provides a reusable mp3 UI component given a mp3 URL.

 goog.ui.media.Mp3 is actually a {@link goog.ui.ControlRenderer}, a stateless
 class - that could/should be used as a Singleton with the static method
 {@code goog.ui.media.Mp3.getInstance} -, that knows how to render Mp3s. It is
 designed to be used with a {@link goog.ui.Control}, which will actually
 control the media renderer and provide the {@link goog.ui.Component} base.
 This design guarantees that all different types of medias will behave alike
 but will look different.

 goog.ui.media.Mp3 expects mp3 urls on {@code goog.ui.Control.getModel} as
 data models, and render a flash object that will play that URL.

 Example of usage:

 <pre class="lang-js">
 goog.ui.media.Mp3.newControl(&#39;<a href="http://hostname/file.mp3&#39;).render(">http://hostname/file.mp3&#39;).render(</a>);
 </pre>

 Mp3 medias currently support the following states:

 <ul>
 <li> {@link goog.ui.Component.State.DISABLED}: shows &#39;flash not available&#39;
 <li> {@link goog.ui.Component.State.HOVER}: mouse cursor is over the mp3
 <li> {@link goog.ui.Component.State.SELECTED}: mp3 is playing
 </li></li></li></ul>

 Which can be accessed by

 <pre class="lang-js">
 mp3.setEnabled(true);
 mp3.setHighlighted(true);
 mp3.setSelected(true);
 </pre>
  </div>
  

        <div class="g-unit" id="useful-links">
          <div class="title">Useful links</div>
          <ol>
            <li><a href="closure_goog_ui_media_mp3.js.source.html"><span class='source-code-link'>Source Code</span></a></li>
          </ol>
        </div>
</div>

<h2 class="g-first">File Location</h2>
  <div class="g-section g-tpl-20-80">
    <div class="g-unit g-first">
      <div class="g-c-cell code-label">ui/media/mp3.js</div>
    </div>
  </div>
<hr/>


  <h2>Classes</h2>
 <div class="fn-constructor">
        <a href="class_goog_ui_media_Mp3.html">
          goog.ui.media.Mp3</a><br/>
        <div class="class-details">Subclasses a goog.ui.media.MediaRenderer to provide a Mp3 specific media
renderer.

This class knows how to parse mp3 URLs, and render the DOM structure
of mp3 flash players. This class is meant to be used as a singleton static
stateless class, that takes {@code goog.ui.media.Media} instances and renders
it. It expects {@code goog.ui.media.Media.getModel} to return a well formed,
previously checked, mp3 URL {@see goog.ui.media.PicasaAlbum.parseUrl},
which is the data model this renderer will use to construct the DOM
structure. {@see goog.ui.media.PicasaAlbum.newControl} for an example of
constructing a control with this renderer.

This design is patterned after <a href="http://go/closure_control_subclassing">http://go/closure_control_subclassing</a>

It uses {@link goog.ui.media.FlashObject} to embed the flash object.</div>
 </div>
      
<br/>

  <div class="legend">
        <span class="key publickey"></span><span>Public</span>
        <span class="key protectedkey"></span><span>Protected</span>
        <span class="key privatekey"></span><span>Private</span>
  </div>


  <h2>Global Functions</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.media.Mp3.MATCHER"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">MATCHER<span class="args">()</span>
        </span>
      </div>


     <div class="entryOverview">
       Regular expression to check if a given URL is a valid mp3 URL.

Copied from <a href="http://go/markdownlite.js">http://go/markdownlite.js</a>.


NOTE: although it would be easier to use goog.string.endsWith(&#39;.mp3&#39;),
in the future, we want to provide media inlining, which is basically getting
a text and replacing all mp3 references with an mp3 player, so it makes sense
to share the same regular expression to match everything.
     </div>

   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line135">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.media.Mp3.buildFlashUrl"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">buildFlashUrl<span class="args">(<span class="arg">mp3Url</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
      </div>


     <div class="entryOverview">
       A static method that builds a URL that will contain the flash player that
will play the {@code mp3Url}.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">mp3Url</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
        <div class="entryOverview">The URL of the mp3 music.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>&nbsp;
            An URL of a flash player that will know how to play the given {@code mp3Url}.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line185">code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.media.Mp3.newControl"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">newControl<span class="args">(<span class="arg">dataModel</span>,&nbsp;<span class="arg">opt_domHelper</span>)</span>
        </span>
        &#8658; <div class="fullType"><span class="type"><a href="class_goog_ui_media_Media.html">goog.ui.media.Media</a></span></div>
      </div>


     <div class="entryOverview">
       A static convenient method to construct a goog.ui.media.Media control out of
a mp3 URL. It checks the mp3 URL, sets it as the data model
goog.ui.media.Mp3 renderer uses, sets the states supported by the renderer,
and returns a Control that binds everything together. This is what you
should be using for constructing Mp3 videos, except if you need more fine
control over the configuration.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">dataModel</span>
        : <div class="fullType"><span class="type"><a href="class_goog_ui_media_MediaModel.html">goog.ui.media.MediaModel</a></span></div>
        <div class="entryOverview">A media model that must contain an mp3 url on {@code dataModel.getUrl}.</div>
     </td>
   </tr>
     
   <tr class="odd">
     <td>
        <span class="entryName">opt_domHelper</span>
        : <div class="fullType"><span class="type"><a href="class_goog_dom_DomHelper.html">goog.dom.DomHelper</a></span></div>
        <div class="entryOverview">Optional DOM helper, used for document interaction.</div>
     </td>
   </tr>
  </table>
      </div>
   
      <div class="detailsSection">
        <b>Returns:</b>&nbsp;<div class="fullType"><span class="type"><a href="class_goog_ui_media_Media.html">goog.ui.media.Media</a></span></div>&nbsp;
            A goog.ui.Control subclass with the mp3 renderer.
      </div>
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line154">code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry public">
       <td class="access"></td>






  <td>
    <a name="goog.ui.media.Mp3.setFlashUrl"></a>


     <div class="arg">
       <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">setFlashUrl<span class="args">(<span class="arg">flashUrl</span>)</span>
        </span>
      </div>


     <div class="entryOverview">
       A static method that sets which flash URL this class should use. Use this if
you want to host your own flash mp3 player.
     </div>


    <! -- Method details -->
    <div class="entryDetails">

      <div class="detailsSection">
        <b>Arguments: </b>






<table class="horiz-rule">
     
   <tr class="even">
     <td>
        <span class="entryName">flashUrl</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
        <div class="entryOverview">The URL of the flash mp3 player.</div>
     </td>
   </tr>
  </table>
      </div>
   
  
    </div>
   
  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line172">code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



  <h2>Global Properties</h2>





<div class="section">
  <table class="horiz-rule">


     <tr class="even entry public">
       <td class="access"></td>





  <a name="goog.ui.media.Mp3.CSS_CLASS"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">CSS_CLASS</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       Default CSS class to be applied to the root element of components rendered
by this renderer.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line109">Code &raquo;</a>
  </td>
     </tr>


     <tr class="odd entry private">
       <td class="access"></td>





  <a name="goog.ui.media.Mp3.PLAYER_ARGUMENTS_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">PLAYER_ARGUMENTS_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       Flash player arguments. We expect that {@code flashUrl_} will contain a flash
movie that takes an audioUrl parameter on its URL, containing the URL of the
mp3 to be played.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line100">Code &raquo;</a>
  </td>
     </tr>


     <tr class="even entry private">
       <td class="access"></td>





  <a name="goog.ui.media.Mp3.flashUrl_"></a>

  <td>


     <div class="arg">
        <img align="left" src="static/images/blank.gif">

        <span class="entryNamespace">goog.ui.media.Mp3.</span><span class="entryName">flashUrl_</span>
        : <div class="fullType"><span class="type"><a href="http://www.google.com/url?sa=D&q=https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Global_Objects/String">string</a></span></div>
     </div>


     <div class="entryOverview">
       Flash player URL. Uses Google Reader&#39;s mp3 flash player by default.
     </div>

  </td>


  <td class="view-code">
     <a href="closure_goog_ui_media_mp3.js.source.html#line118">Code &raquo;</a>
  </td>
     </tr>


  </table>
</div>



      <!-- Column 1 end -->
    </div>

        <div class="col2">
          <!-- Column 2 start -->
          <div class="col2-c">
            <h2 id="ref-head">Directory media</h2>
            <div id="localView"></div>
          </div>

          <div class="col2-c">
            <h2 id="ref-head">File Reference</h2>
            <div id="sideFileIndex" rootPath="closure/goog" current="ui/media/mp3.js"></div>
          </div>
          <!-- Column 2 end -->
        </div>
</div>
</div>

</body>
</html>
